import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Card,
  Row,
  Col,
  Radio,
  Input,
  Button,
  Modal,
  Table,
  Divider
} from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import styles from './List.less';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { Search } = Input;

@connect(({ bill, loading }) => ({
  bill,
  loading: loading.models.bill,
}))

class BasicList extends PureComponent {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'bill/fetch',
      payload: {
        count: 8,
      },
    });
  }

  render() {
    const {
      bill: { list }
    } = this.props;
    // 表头
    const columns = [{
      title: '执行者',
      dataIndex: 'executor',
      key: 'executor',
    }, {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
    }, {
      title: '接受时间',
      dataIndex: 'createAt',
      key: 'createAt',
    }, {
      title: '操作',
      // key: 'action',
      render: state => (
        <div>
          <Button onClick={() => {handleButton()}} size="small" type="primary">通过</Button>
          <Divider type="vertical" />
          <Button size="small" type="danger">不通过</Button>
        </div>
      ),
    }]

    const Info = ({ title, value, bordered }) => (
      <div className={styles.headerInfo}>
        <span>{title}</span>
        <p>{value}</p>
        {bordered && <em />}
      </div>
    );

    const handleButton = () => {
      // console.log(state)
      Modal.confirm({
        title: '提示',
        content: '确定通过？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          alert(1)
        },
      });
    };
    const extraContent = (
      <div className={styles.extraContent}>
        <RadioGroup defaultValue="all">
          <RadioButton value="all">待审核</RadioButton>
          <RadioButton value="progress">全部</RadioButton>
        </RadioGroup>
        <Search className={styles.extraContentSearch} placeholder="请输入" onSearch={() => ({})} />
      </div>
    );

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      pageSize: 5,
      total: 50,
    };

    return (
      <PageHeaderWrapper>
        <div className={styles.standardList}>

          <Card
            className={styles.listCard}
            bordered={false}
            title="任务列表"
            style={{ marginTop: 24 }}
            bodyStyle={{ padding: '0 32px 40px 32px' }}
            extra={extraContent}
          >
            <Table bordered dataSource={list} columns={columns} />
          </Card>
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default BasicList;
